<template>
  <div id="app">
    <VFormDesigner
      :designer-config="designerConfig"
      :field-list-data="fieldListData"
      :global-dsv="globalDsv"
      formtype="document"
      @field-widget-used="handleFWU"
      @field-widget-removed="handleFWR"
      @form-json-updated="handleFJU"
      ref="vfdRef"
    >
      <!-- <template #customToolButtons>
        <el-button link @click="changeThemePrimaryColor">改色</el-button>
      </template> -->
    </VFormDesigner>
  </div>
</template>

<script>
import VFormDesigner from "./components/form-designer/index.vue"

export default {
  name: "App",
  components: {
    VFormDesigner,
  },
  data() {
    return {
      formJson: {
        widgetList: [
          {
            key: 35268,
            type: "input",
            alias: "",
            icon: "text-field",
            formItemFlag: true,
            options: {
              name: "input75608",
              keyNameEnabled: false,
              keyName: "",
              label: "input",
              labelAlign: "",
              type: "text",
              defaultValue: "",
              prepend: "",
              append: "",
              contentBackgroundColor: "",
              placeholder: "",
              columnWidth: "200px",
              columnMinWidth: "200px",
              size: "",
              labelWidth: null,
              labelHidden: false,
              labelWrap: false,
              bindObject: false,
              readonly: false,
              disabled: false,
              hidden: false,
              clearable: true,
              showPassword: false,
              required: false,
              requiredHint: "",
              validation: "",
              validationHint: "",
              customClass: [],
              labelIconClass: null,
              labelIconPosition: "rear",
              labelTooltip: null,
              minLength: null,
              maxLength: null,
              showWordLimit: false,
              prefixIcon: "",
              suffixIcon: "",
              appendButton: false,
              appendButtonDisabled: false,
              buttonIcon: "custom-search",
              appendText: false,
              textForAppend: "",
              onCreated: "",
              onMounted: "",
              onInput: "",
              onChange: "",
              onFocus: "",
              onBlur: "",
              onValidate: "",
              onAppendButtonClick: "",
            },
            id: "input75608",
          },
        ],
        widgetViewList: [{ viewTitle: "传入视图", widgetList: [] }],
        formConfig: {
          modelName: "formData-test",
          refName: "vForm",
          rulesName: "rules",
          labelWidth: 80,
          formWidth: "",
          labelPosition: "left",
          size: "",
          labelAlign: "label-left-align",
          cssCode: "",
          customClass: "",
          functions: "",
          layoutType: "PC",
          onFormCreated: "",
          onFormMounted: "",
          onFormDataChange: "",
          onFormValidate: "",
        },
      },
      formData: {},
      optionData: {},

      designerConfig: {
        //logoHeader: false,

        //chartLib: true,
        metadataLib: false,
        //componentLib: false,
        //layoutTypeButton: false,
        // resetFormJson: false
        widgetAddbtn: true, // 多视图功能
      },

      /* 集成后端字段名称选择功能--演示 */
      fieldListData: {
        fieldList: [],
        subFormList: [
          // {
          //   label: '订单明细',
          //   name: 'orderDetail'
          // },
          // {
          //   label: '发货明细',
          //   name: 'deliveryDetail'
          // }
        ],
      },

      //全局数据源变量
      globalDsv: {
        testApiHost: "http://172.19.7.23", // 请求变量
        headers: {
          Authorization:
            "Bearer IFtdSZQt_xo4o7TQCMT6_ruKzY54sPfhN0fgVvlR5iu8kJjRkT6FZKeSf8wfioTU2vfsJ7y67atR7MPNqIwWQCerYEnIuHCYxX7TpplgsnfZIhj4dOFRuQRvuXtG2fnY",
          "TENANT-ID": "1776583155000602626",
        },
        Authorization:
          "Bearer IFtdSZQt_xo4o7TQCMT6_ruKzY54sPfhN0fgVvlR5iu8kJjRkT6FZKeSf8wfioTU2vfsJ7y67atR7MPNqIwWQCerYEnIuHCYxX7TpplgsnfZIhj4dOFRuQRvuXtG2fnY",
        "TENANT-ID": "1776583155000602626",
        uploadURL: "/api/file/fileDetail/uploadFile",
        dbIntoLink: (e) => {
          console.log(e)
        },
        openDataMappingDialog: (e) => {
          console.log(e)
        },
        // wps实时获取选中文字通知
        wpsWordRangeText: (e) => {
          console.log(e)
        },
        //实时获取选中的断号
        serialBrokenId: (e) => {
          console.log(e)
        },
        // 测试用户数据
        userInfo: {
          userId: "1776583155763965954",
          username: "admin",
          password:
            "$2a$10$MZRJmt4XfG.xdSEx6qq7m.8878G2mWeWNsif6s0wTs1V5z0IK2Wwu",
          createBy: "admin",
          updateBy: "admin",
          createTime: "2024-04-06 20:10:06",
          updateTime: "2024-04-29 21:16:29",
          delFlag: "0",
          lockFlag: "0",
          partFlag: "0",
          mainFlag: "1",
          gender: " ",
          certificatesNumber: "",
          phone: "13211111111",
          avatar: null,
          deptId: "1776583155000602626",
          unitId: null,
          tenantId: "1776583155000602626",
          tenantName: "北京中核华辉有限公司",
          wxOpenid: null,
          wxCpUserid: null,
          wxDingUserid: null,
          miniOpenid: null,
          qqOpenid: null,
          giteeLogin: null,
          oscId: null,
          nickname: null,
          name: "管理员",
          email: null,
          createById: null,
          createByName: null,
          updateById: "1776583155763965954",
          updateByName: "",
        },
        validationConfig: {
          aliasName: true,
        },
      },
    }
  },
  computed: {
    //
  },
  mounted() {
    // 测试编辑回显
    // this.$refs.vfdRef.setFormJson(this.formJson)
  },
  methods: {
    doTest() {
      console.info(
        "form data schema is: " +
          JSON.stringify(this.$refs.vfdRef.buildFormDataSchema())
      )
    },

    changeThemePrimaryColor() {
      // const bodyElement = document.getElementsByTagName("body")[0]
      // bodyElement.style.setProperty("--vf-color-primary", "red");
      // bodyElement.style.setProperty("--el-color-primary", "red");
      this.$refs.vfdRef.setFormJson(this.formJson)
    },

    handleFWU(fwName) {
      console.info("handleFWU ----- ", fwName)
    },

    handleFWR(fwName) {
      console.info("handleFWR ------", fwName)
    },

    handleFJU(reason) {
      console.warn("form json updated...", reason)
    },
  },
}
</script>

<style lang="scss">
#app {
  height: 100%;
}
</style>
